<template>
  <div :id="id">
    <el-form :inline="inline" class="read-form">
      <el-form-item
        v-for="(item, index) in formData"
        :key="index"
        :label="item.label + ':'"
        :style="{ width: item?.width ?? '30%' }"
      >
        <span>{{ formInfo[item.value] ?? "--" }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "readForm",
    },
    inline: {
      type: Boolean,
      default: true,
    },
    formData: {
      type: Array,
      default: () => [],
    },
    formInfo: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.read-form) {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-size: @size16;
    font-weight: 400;
    color: @color2;
  }
  .el-form-item__content {
    font-size: @size16;
    font-weight: 400;
    color: @color2;
  }
}
</style>
